<template>
  <FModal ref="FModal" @ok="close" width="800"
          header="流程预览" class="flow-model-preview-wrapper">
    <FlowModel ref="FlowModel"></FlowModel>
  </FModal>
</template>

<script>
import FModal from '@/components/FModal';
import {getAction} from '@/request/BaseRequest';
import FlowModel from '@/components/flow/FlowModel';
import FlowModelEditor from '@/components/flow/FlowModelEditor';

export default {
  name: "FlowPreviewModal",
  components: {
    FlowModel,
    FlowModelEditor,
    FModal
  },
  data() {
    return {
      flowId: undefined,
      flowModal: undefined
    };
  },
  methods: {
    setData({id}) {
      this.flowId = id;
      this.open();
      this.$nextTick(this.loadFlow);
    },
    close() {
      this.$refs.FModal.close();
    },
    open() {
      this.$refs.FModal.open();
    },
    setFlowModal(flowModal) {
      this.flowModal = flowModal;
      this.flowModal.flowDefinition = JSON.parse(this.flowModal.flowDefinition);
      this.$nextTick(() => {
        this.$refs.FlowModel.setData(this.flowModal.flowDefinition);
      });
    },
    loadFlow() {
      this.loading = true;
      getAction('/flow/loadProcessDefinition', {id: this.flowId}).then(data => {
        if (data.success) {
          this.setFlowModal(data.result);
        } else {
          this.$notification.error({message: data.message, result: data.result, duration: 3});
        }
        this.loading = false;
      })
    },
  }
};
</script>

<style scoped>

</style>
<style>
.flow-model-preview-wrapper {

}
</style>
